<template>
  <el-dialog
    title="产品"
    :visible.sync="dialogVisible"
    append-to-body
    center
    destroy-on-close
    width="40%"
    :before-close="handleClose"
  >
    <el-table ref="table" v-loading="loading" :data="list" style="width: 100%" row-key="id" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" :reserve-selection="true" />
      <el-table-column prop="name" label="产品名称" width="180" />
      <el-table-column prop="standardAmount" label="标准标价" />
      <el-table-column prop="unit" label="标准单位" width="180" />
    </el-table>
    <Pagination class="mt-20" :total="pagination.total" :page-num="pagination.pageNum" :page-size="pagination.pageSize" @paginationFun="paginationFun" />
    <span slot="footer" class="dialog-footer">
      <el-button @click="dialogVisible = false">取 消</el-button>
      <el-button type="primary" @click="submitFun">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import Pagination from '@/components/Basic/PaginationTwo'
import { getProductPage } from '../../../../finance/charge/plan/api'
export default {
  components: {
    Pagination
  },
  props: {
    value: {
      type: Array,
      default: () => ([])
    }
  },
  data () {
    return {
      dialogVisible: false,
      pagination: {
        total: 0,
        pageSize: 10,
        pageNum: 1
      },
      list: [],
      loading: false
    }
  },
  created () {
    this.getData()
  },
  methods: {
    // 分页
    paginationFun (val) {
      this.pagination.pageNum = val
      this.getData()
    },
    mainFun () {
      this.checkData = []
      this.dialogVisible = true
      this.getData()
    },
    getData () {
      this.loading = true
      this.list = []
      const prams = {
        pageNum: this.pagination.pageNum - 1,
        pageSize: this.pagination.pageSize
      }
      getProductPage(prams).then(res => {
        this.loading = false
        this.pagination.total = res.totalElements
        this.list = res.content
        this.toggleRowSelection()
      }).finally(() => {
        this.loading = false
      })
    },
    handleSelectionChange (val) {
      console.log(val)
      this.checkData = val
    },
    submitFun () {
      this.$emit('getProductData', [...this.checkData, ...this.value])
      this.dialogVisible = false
    },
    handleClose (done) {
      this.dialogVisible = false
    },
    toggleRowSelection () {
      console.log(this.value)
      setTimeout(() => {
        this.list.forEach(row => {
          for (let i = this.value.length - 1; i >= 0; i--) {
            const value = this.value[i]
            if (row.id === value.id) {
              this.$refs.table.toggleRowSelection(row, true)
              this.value.splice(i, 1)
            }
          }
        })
      }, 100)
    }
  }
}
</script>

<style>
</style>
